<template>
  <rk-dialog width="80%"
    height="70%"
    :title="title"
    :visible="visible"
    :destroyOnClose="true"
    @close="visible = false"
    :maskClosable="false">
    <template #default>
      <el-form :model="formModal"
        :rules="formRules"
        label-width="120px">
        <el-form-item label="系统参数编码"
          prop="dcode">
          <el-input v-model="formModal.dCode"
            disabled />
        </el-form-item>
        <el-form-item label="系统参数名称"
          prop="dname">
          <el-input v-model="formModal.dName"
            disabled />
        </el-form-item>
        <el-form-item label="系统参数值">
          <el-select v-if="dvalueOptions.length > 0"
            v-model="formModal.dValue">
            <el-option v-for="item in dvalueOptions"
              :key="item.value"
              :label="`${item.value} ${item.label}`"
              :value="item.value" />
          </el-select>
          <el-input v-else
            v-model="formModal.dValue" />
        </el-form-item>
        <el-form-item label="参数取值范围">
          <el-input v-model="formModal.paramValueset" />
        </el-form-item>
        <el-form-item label="系统参数说明">
          <el-input v-model="formModal.dDesc" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary"
        @click="handleConfirm">确定</el-button>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </rk-dialog>
</template>

<script setup>
import { ElMessage, ElLoading } from 'element-plus'
import { useSystemApi } from '@/api/index';
const { getSysParamDetail, saveSysParam } = useSystemApi()
// emits
const emits = defineEmits([
  'confirm', 'close'
])
// 面板相关
const title = ref('修改系统参数')
const visible = ref(false)
const dvalueOptions = ref([])
// 表单相关
let formModal = ref({})
const formRules = ref({
  dCode: [{ required: true, message: '请输入系统参数编码', trigger: 'blur' }],
  dName: [{ required: true, message: '请输入系统参数名称', trigger: 'blur' }]
})
// 打开弹框
const handleOpen = async (row) => {
  if (row) {
    await loadForm(row)
    visible.value = true
  }
}
//重置
const handleReset = () => {
  visible.value = false
}
//关闭弹框
const handleClose = () => {
  handleReset()
  emitClose()
}
// 确认保存
const handleConfirm = async () => {
  await handleSave()
  handleReset()
  emitConfirm()
}
/** 确认提交 */
const handleSave = async () => {
  const params = { ...formModal.value }
  const loading = ElLoading.service({ fullscreen: true })
  const result = await saveSysParam(params) 
  const { data, code, msg } = result
  if (code === 200) {
    ElMessage({
      message: '保存成功！',
      type: 'success',
    })
    loading.close()
  } else {
    ElMessage({
      message: msg,
      type: 'error',
    })
    loading.close()
  }
}
//获取数据
const loadForm = async (row) => {
  const { dCode } = row
  const result = await getSysParamDetail(dCode)
  const { data, code, msg } = result
  if (code === 200) {
    formModal.value = data
  } else {
    console.error(msg)
  }
}
// 监听表单 PRO_OPER_TERM 运营期限字段数据进行联动
watch(
  () => formModal.value.paramValueset,
  (newValue, oldValue) => {
    tranfParamValueSet(newValue)
  },
  { deep: true, immediate: false }
)
const tranfParamValueSet = (paramValueSet) => {
  let resultOptions = []
  if (paramValueSet) {
    paramValueSet.split('+').map(item => {
      const option = item.split('#')
      resultOptions.push({
        label: option[1] || '',
        value: option[0] || ''
      })
    })
  }
  dvalueOptions.value = resultOptions
}
// emits 相关
const emitConfirm = () => {
  emits('confirm')
}
const emitClose = () => {
  emits('close')
}
defineExpose({
  handleOpen
})

</script>
<style lang="scss" scoped>
</style>